<template>
  <view
    :class="['wrap']"
    :style="{ transform: `translateY(-${inputTopNum}px)` }"
  >
    <view class="topArea">
      <view class="iputArea lh-flex-1">
        <CustomTextarea
          v-model="inputValue"
          :autoFocus="autoFocus"
          style="width: 100%"
        />
      </view>
      <view class="confirmBtnWrap ml16">
        <up-button
          type="primary"
          text="发送"
          v-bind="buttonPrimary"
          shape="circle"
          :disabled="!inputValue"
          @click="confirm"
        ></up-button>
      </view>
    </view>
  </view>
  <view class="wrapBg" @click="handlerMb"></view>
</template>

<script setup>
import { ref, toRef, watch } from "vue";
import { useStore } from "vuex";
import CustomTextarea from "./CustomTextarea.vue";

const props = defineProps({
  autoFocus: {
    type: Boolean,
    default: true,
  },
});
const autoFocus = toRef(props, "autoFocus");
const emit = defineEmits(["close"]);

const store = useStore();
const keyboardRes = toRef(store.state.keyboard, "keyboardRes");
const inputTopNum = ref(0);
watch(keyboardRes, (val) => {
  const { duration, height } = val;
  inputTopNum.value = height;
});

const inputValue = ref("");

const handlerMb = () => {
  emit("close");
};

const confirm = () => {
  uni.$emit("detailCommentConfirm", inputValue.value);
  handlerMb();
};

const buttonPrimary = {
  color: "#00A0E9",
  customStyle: {
    color: "#fff",
    "font-size": "28rpx",
    "font-weight": 500,
    height: "68rpx",
  },
};
</script>

<style lang="scss">
.wrap {
  background-color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 10;
}
.wrapBg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9;
  background-color: rgba($color: #000000, $alpha: 0.6);
}
.topArea {
  width: 100%;
  padding: 26rpx 74rpx;
  display: flex;
  align-items: center;
}
.iputArea {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f6f6f6;
  min-height: 68rpx;
  border-radius: 68rpx;
  padding: 0 30rpx;
}

.confirmBtnWrap {
  width: 120rpx;
}
</style>
